<template>
    <div>
      <a-button type="primary" @click="showModal">Open Modal</a-button>
      <a-modal
        v-model:visible="visible"
        title="Basic Modal"
        @ok="handleOk"
        width="100%"
        wrapClassName="full-modal"
      >
        <p>Some contents...</p>
        <p>Some contents...</p>
        <p>Some contents...</p>
      </a-modal>
    </div>
  </template>
  <script lang="ts">
  import { defineComponent, ref } from 'vue';
  export default defineComponent({
    setup() {
      const visible = ref<boolean>(false);
  
      const showModal = () => {
        visible.value = true;
      };
  
      const handleOk = (e: MouseEvent) => {
        console.log(e);
        visible.value = false;
      };
      return {
        visible,
        showModal,
        handleOk,
      };
    },
  });
  </script>
  <style lang="less">
  .full-modal {
    .ant-modal {
      max-width: 100%;
      top: 0;
      padding-bottom: 0;
      margin: 0;
    }
    .ant-modal-content {
      display: flex;
      flex-direction: column;
      height: calc(100vh);
    }
    .ant-modal-body {
      flex: 1;
    }
  }
  </style>
  